<template>
  <!-- 组件化思想：把一个完整的页面，拆成一个一个的小组件 -->
  <!-- 每一个组件内部都有结构，样式，行为 -->
  <!-- template就是vue组件中的结构部分 -->
  <div id="app">
    <!-- 插值表达式中不能写if和for语法 -->
    <div class="son">我父亲的年纪是{{ age }}岁</div>
  </div>
</template>

<script>
// 默认导出 (默认暴露)
export default {
  name: 'App',
  //vue的组件部分
  //data属性必须是一个函数，这个函数要return一个对象，这个对象中的数据就是该组件中依赖的数据
  data() {
    return {
      age: 60,
    }
  },
}
</script>

<style lang="less">
/* style这部分就是样式部分，css代码写在这里 */
// 使用less语法
// npm install less less-loader --save-dev
.box {
  height: 300px;
  width: 300px;
  background-color: rgb(255, 193, 193);
  .son {
    color: rgb(89, 0, 0);
  }
}
</style>
